<template>
  <div class="pieChartEcahrts-box">
    <!-- 饼图 -->
    <div
      ref="myChartsRef"
      :style="{ height: height, width: width }"
      class="echarts"
    ></div>
  </div>
</template>
<script setup>
import { nextTick } from "vue"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  pieChartObj: {
    type: Object
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)
  const resData = props.pieChartObj.pieChartList
  let option = {
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: props.pieChartObj.radius,
        center: props.pieChartObj.center,
        z: 12,
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0,
          // 单色
          // color: props.pieChartObj.colorList
          //   ? function (params) {
          //       console.log(params.dataIndex, "xxxxx")
          //       return props.pieChartObj.colorList[params.dataIndex]
          //     }
          //   : ""
          // 渐变颜色
          color: props.pieChartObj.colorList
            ? function (params) {
                // console.log(params.dataIndex, "xxxxx")
                // console.log(props.pieChartObj.colorList)

                return new $echarts.graphic.LinearGradient(1, 1, 1, 0, [
                  {
                    offset: 0,
                    color: props.pieChartObj.colorList[params.dataIndex][0]
                  },
                  {
                    offset: 1,
                    color: props.pieChartObj.colorList[params.dataIndex][1]
                  }
                ])
              }
            : ""
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: resData
      }
    ]
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  // console.log(props.pieChartObj)
  nextTick(() => {
    initEcharts()
  })
  addEventListener("resize", () => {
    initEcharts()
  })
})

// watch(
//   () => props.option,
//   (val) => {
//     //// console.log(val);
//     nextTick(() => {
//       if (myChart.value) {
//         initEcharts()
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>
<style scoped lang="less">
.pieChartEcahrts-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
